<template>
  <div>
    <div class="card">
      <div class="BG">
        <svg
          viewBox="0 0 512 512"
          class="ionicon"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M256 176a80 80 0 1080 80 80.24 80.24 0 00-80-80zm172.72 80a165.53 165.53 0 01-1.64 22.34l48.69 38.12a11.59 11.59 0 012.63 14.78l-46.06 79.52a11.64 11.64 0 01-14.14 4.93l-57.25-23a176.56 176.56 0 01-38.82 22.67l-8.56 60.78a11.93 11.93 0 01-11.51 9.86h-92.12a12 12 0 01-11.51-9.53l-8.56-60.78A169.3 169.3 0 01151.05 393L93.8 416a11.64 11.64 0 01-14.14-4.92L33.6 331.57a11.59 11.59 0 012.63-14.78l48.69-38.12A174.58 174.58 0 0183.28 256a165.53 165.53 0 011.64-22.34l-48.69-38.12a11.59 11.59 0 01-2.63-14.78l46.06-79.52a11.64 11.64 0 0114.14-4.93l57.25 23a176.56 176.56 0 0138.82-22.67l8.56-60.78A11.93 11.93 0 01209.94 26h92.12a12 12 0 0111.51 9.53l8.56 60.78A169.3 169.3 0 01361 119l57.2-23a11.64 11.64 0 0114.14 4.92l46.06 79.52a11.59 11.59 0 01-2.63 14.78l-48.69 38.12a174.58 174.58 0 011.64 22.66z"
          ></path>
        </svg>
      </div>
      <div class="content">
        <p class="heading">Oops!</p>
        <p class="sub-heading">forgot password?</p>
        <p class="sub-sub-heading">Type your email to recover</p>
        <input class="email" placeholder="Email" type="text" />
        <button class="card-btn">Reset Password</button>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
import {onMounted} from "vue";

onMounted(() => {

})
</script>
<style scoped>
.card {
  width: 230px;
  height: 230px;
  position: relative;
  background-color: rgb(255, 255, 255);
  border-bottom: 3px solid #4c6bff;
  overflow: hidden;
  -webkit-box-shadow: 0px 12px 65px -39px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 12px 65px -39px rgba(0, 0, 0, 1);
  box-shadow: 0px 12px 65px -39px rgba(0, 0, 0, 1);
  border-radius: 5px;
}
.BG {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.BG svg {
  position: absolute;
  width: 50%;
  left: -20%;
  top: -20%;
  fill: rgb(244, 244, 244);
  transition: all 0.5s;
}
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 25px;
  color: rgb(30, 30, 30);
  gap: 3px;
}
.heading {
  font-size: 1.4em;
  font-weight: 700;
  color: rgb(30, 30, 30);
}
.sub-heading {
  margin-top: -7px;
  font-size: 0.9em;
  font-weight: 600;
  color: rgb(30, 30, 30);
}
.sub-sub-heading {
  font-size: 0.7em;
  color: rgb(128, 128, 128);
}

.email {
  width: 100%;
  height: 25px;
  margin-top: 20px;
  border: none;
  border-bottom: 1px solid #c0c7ec;
  outline: none;
  font-size: 0.7em;
  background-color: transparent;
}
.card-btn {
  margin-top: 20px;
  height: 30px;
  width: 100%;
  border: none;
  background: linear-gradient(60deg, #4c6bff, #8196ff);
  color: white;
  border-radius: 30px;
  cursor: pointer;
}

.card:hover .BG svg {
  left: 0%;
  top: 0%;
  transform: rotate(180deg) scale(9);
  fill: #c0c7ec;
}

</style>
